
const MobileArea = function () {
  this.gearArea
  this.data
  this.index = 0
  this.value = [0, 0, 0]
}
MobileArea.prototype = {
  init: function (params) {
    this.params = params
    // this.trigger = document.querySelector(params.trigger);
    if (params.valueTo) {
      this.valueTo = document.querySelector(params.valueTo)
    }
    this.done = params.done
    this.keys = params.keys
    this.type = params.type || 1
    switch (this.type) {
      case 1:
      case 2:
        break
      default:
        throw new Error('错误提示: 没有这种数据源类型')
    }
    this.bindEvent()
  },
  getData: function () {
    var _self = this
    if (typeof _self.params.data == 'object') {
      _self.data = _self.params.data
    } else {
      var xhr = new XMLHttpRequest()
      xhr.open('get', _self.params.data)
      xhr.onload = function (e) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) {
          var responseData = JSON.parse(xhr.responseText)
          _self.data = responseData.data
          // if (callback) {

          // };
        }
      }
      xhr.send()
    }
  },

  bindEvent: function () {
    var _self = this
    // 呼出插件
    function popupArea (e) {
      _self.gearArea = document.createElement('div')
      _self.gearArea.className = 'gearArea'
      _self.gearArea.innerHTML = '<div class="area_ctrl slideInUp">' +
                '<div class="area_btn_box">' +
                '<div class="area_btn larea_cancel">取消</div>' +
                '<div class="area_btn larea_finish">确定</div>' +
                '</div>' +
                '<div class="area_roll_mask">' +
                '<div class="area_roll">' +
                '<div>' +
                '<div class="gear area_province" data-areatype="area_province"></div>' +
                '<div class="area_grid">' +
                '</div>' +
                '</div>' +
                '<div>' +
                '<div class="gear area_city" data-areatype="area_city"></div>' +
                '<div class="area_grid">' +
                '</div>' +
                '</div>' +
                '<div>' +
                '<div class="gear area_county" data-areatype="area_county"></div>' +
                '<div class="area_grid">' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>'
      document.body.appendChild(_self.gearArea)
      areaCtrlInit()
      var larea_cancel = _self.gearArea.querySelector('.larea_cancel')
      larea_cancel.addEventListener('touchstart', function (e) {
        _self.close(e)
      })
      var larea_finish = _self.gearArea.querySelector('.larea_finish')
      larea_finish.addEventListener('touchstart', function (e) {
        _self.finish(e)
      })
      var area_province = _self.gearArea.querySelector('.area_province')
      var area_city = _self.gearArea.querySelector('.area_city')
      var area_county = _self.gearArea.querySelector('.area_county')
      area_province.addEventListener('touchstart', gearTouchStart)
      area_city.addEventListener('touchstart', gearTouchStart)
      area_county.addEventListener('touchstart', gearTouchStart)
      area_province.addEventListener('touchmove', gearTouchMove)
      area_city.addEventListener('touchmove', gearTouchMove)
      area_county.addEventListener('touchmove', gearTouchMove)
      area_province.addEventListener('touchend', gearTouchEnd)
      area_city.addEventListener('touchend', gearTouchEnd)
      area_county.addEventListener('touchend', gearTouchEnd)
    }
    // 初始化插件默认值
    function areaCtrlInit () {
      _self.gearArea.querySelector('.area_province').setAttribute('val', _self.value[0])
      _self.gearArea.querySelector('.area_city').setAttribute('val', _self.value[1])
      _self.gearArea.querySelector('.area_county').setAttribute('val', _self.value[2])

      switch (_self.type) {
        case 1:
          _self.setGearTooth(_self.data)
          break
        case 2:
          _self.setGearTooth(_self.data[0])
          break
      }
    }
    // 触摸开始
    function gearTouchStart (e) {
      e.preventDefault()
      var target = e.target
      while (true) {
        if (!target.classList.contains('gear')) {
          target = target.parentElement
        } else {
          break
        }
      }
      clearInterval(target['int_' + target.id])
      target['old_' + target.id] = e.targetTouches[0].screenY
      target['o_t_' + target.id] = (new Date()).getTime()
      var top = target.getAttribute('top')
      if (top) {
        target['o_d_' + target.id] = parseFloat(top.replace(/em/g, ''))
      } else {
        target['o_d_' + target.id] = 0
      }
      target.style.webkitTransitionDuration = target.style.transitionDuration = '0ms'
    }
    // 手指移动
    function gearTouchMove (e) {
      e.preventDefault()
      var target = e.target
      while (true) {
        if (!target.classList.contains('gear')) {
          target = target.parentElement
        } else {
          break
        }
      }
      target['new_' + target.id] = e.targetTouches[0].screenY
      target['n_t_' + target.id] = (new Date()).getTime()
      var f = (target['new_' + target.id] - target['old_' + target.id]) * 30 / window.innerHeight
      target['pos_' + target.id] = target['o_d_' + target.id] + f
      target.style['-webkit-transform'] = 'translate3d(0,' + target['pos_' + target.id] + 'em,0)'
      target.setAttribute('top', target['pos_' + target.id] + 'em')
      if (e.targetTouches[0].screenY < 1) {
        gearTouchEnd(e)
      };
    }
    // 离开屏幕
    function gearTouchEnd (e) {
      e.preventDefault()
      var target = e.target
      while (true) {
        if (!target.classList.contains('gear')) {
          target = target.parentElement
        } else {
          break
        }
      }
      var flag = (target['new_' + target.id] - target['old_' + target.id]) / (target['n_t_' + target.id] - target['o_t_' + target.id])
      if (Math.abs(flag) <= 0.2) {
        target['spd_' + target.id] = (flag < 0 ? -0.12 : 0.12)
      } else {
        if (Math.abs(flag) <= 0.5) {
          target['spd_' + target.id] = (flag < 0 ? -0.22 : 0.22)
        } else {
          target['spd_' + target.id] = flag / 1.5
        }
      }
      if (!target['pos_' + target.id]) {
        target['pos_' + target.id] = 0
      }
      rollGear(target)
    }
    // 缓动效果
    function rollGear (target) {
      var d = 0
      var stopGear = false
      function setDuration () {
        target.style.webkitTransitionDuration = target.style.transitionDuration = '200ms'
        stopGear = true
      }
      clearInterval(target['int_' + target.id])
      target['int_' + target.id] = setInterval(function () {
        var pos = target['pos_' + target.id]
        var speed = target['spd_' + target.id] * Math.exp(-0.03 * d)
        pos += speed
        if (Math.abs(speed) > 0.1) {} else {
          var b = Math.round(pos / 2) * 2
          pos = b
          setDuration()
        }
        if (pos > 0) {
          pos = 0
          setDuration()
        }
        var minTop = -(target.dataset.len - 1) * 2
        if (pos < minTop) {
          pos = minTop
          setDuration()
        }
        if (stopGear) {
          var gearVal = Math.abs(pos) / 2
          setGear(target, gearVal)
          clearInterval(target['int_' + target.id])
        }
        target['pos_' + target.id] = pos
        target.style['-webkit-transform'] = 'translate3d(0,' + pos + 'em,0)'
        target.setAttribute('top', pos + 'em')
        d++
      }, 30)
    }
    // 控制插件滚动后停留的值
    function setGear (target, val) {
      val = Math.round(val)
      target.setAttribute('val', val)
      switch (_self.type) {
        case 1:
          _self.setGearTooth(_self.data)
          break
        case 2:
          switch (target.dataset['areatype']) {
            case 'area_province':
              _self.setGearTooth(_self.data[0])
              break
            case 'area_city':
              var ref = target.childNodes[val].getAttribute('ref')
              var childData = []
              var nextData = _self.data[2]
              for (var i in nextData) {
                if (i == ref) {
                  childData = nextData[i]
                  break
                }
              };
              _self.index = 2
              _self.setGearTooth(childData)
              break
          }
      }
    }
    _self.getData()
    // _self.getData(function() {
    //     _self.trigger.addEventListener('click', popupArea);
    // });
    this.showArea = popupArea
  },
  // 重置节点个数
  setGearTooth: function (data) {
    var _self = this
    var item = data || []
    var l = item.length
    var gearChild = _self.gearArea.querySelectorAll('.gear')
    var gearVal = gearChild[_self.index].getAttribute('val')
    var maxVal = l - 1
    if (gearVal > maxVal) {
      gearVal = maxVal
    }
    gearChild[_self.index].setAttribute('data-len', l)
    if (l > 0) {
      var id = item[gearVal][this.keys['id']]
      var childData
      switch (_self.type) {
        case 1:
          childData = item[gearVal].child
          break
        case 2:
          var nextData = _self.data[_self.index + 1]
          for (var i in nextData) {
            if (i == id) {
              childData = nextData[i]
              break
            }
          };
          break
      }
      var itemStr = ''
      for (var i = 0; i < l; i++) {
        itemStr += "<div class='tooth'  ref='" + item[i][this.keys['id']] + "'>" + item[i][this.keys['name']] + '</div>'
      }
      gearChild[_self.index].innerHTML = itemStr
      gearChild[_self.index].style['-webkit-transform'] = 'translate3d(0,' + (-gearVal * 2) + 'em,0)'
      gearChild[_self.index].setAttribute('top', -gearVal * 2 + 'em')
      gearChild[_self.index].setAttribute('val', gearVal)
      _self.index++
      if (_self.index > 2) {
        _self.index = 0
        return
      }
      _self.setGearTooth(childData)
    } else {
      gearChild[_self.index].innerHTML = "<div class='tooth'></div>"
      gearChild[_self.index].setAttribute('val', 0)
      if (_self.index == 1) {
        gearChild[2].innerHTML = "<div class='tooth'></div>"
        gearChild[2].setAttribute('val', 0)
      }
      _self.index = 0
    }
  },
  finish: function (e) {
    var _self = this
    var area_province = _self.gearArea.querySelector('.area_province')
    var area_city = _self.gearArea.querySelector('.area_city')
    var area_county = _self.gearArea.querySelector('.area_county')
    var provinceVal = parseInt(area_province.getAttribute('val'))
    var provinceText = area_province.childNodes[provinceVal].textContent
    var provinceCode = area_province.childNodes[provinceVal].getAttribute('ref')
    var cityVal = parseInt(area_city.getAttribute('val'))
    var cityText = area_city.childNodes[cityVal].textContent
    var cityCode = area_city.childNodes[cityVal].getAttribute('ref')
    var countyVal = parseInt(area_county.getAttribute('val'))
    var countyText = area_county.childNodes[countyVal].textContent
    var countyCode = area_county.childNodes[countyVal].getAttribute('ref')
    // _self.trigger.value = provinceText + ((cityText)?(',' + cityText):(''))+ ((countyText)?(',' + countyText):(''));
    _self.value = [provinceVal, cityVal, countyVal]
    if (this.valueTo) {
      this.valueTo.value = provinceCode + ((cityCode) ? (',' + cityCode) : ('')) + ((countyCode) ? (',' + countyCode) : (''))
    }
    var resData = {
      provinceName: provinceText,
      province: provinceCode,
      cityName: cityText,
      city: cityCode,
      districtName: countyText,
      district: countyCode
    }
    if (typeof this.done == 'function') {
      this.done(resData)
    }
    _self.close(e)
  },
  close: function (e) {
    e.preventDefault()
    var _self = this
    // var evt = new CustomEvent('input');
    // _self.trigger.dispatchEvent(evt);
    if (_self.gearArea) document.body.removeChild(_self.gearArea)
    _self.gearArea = null
  }
}
export default MobileArea
